<template>
  <div class="usersList">
   <el-card style="margin:20px">
      <!-- 顶部栏--搜索以及新增学科按钮 -->
      <el-row :gutter="10">
        <el-col :span="4">
          <el-input v-model="usersList.username" placeholder="根据用户名搜索"></el-input>
        </el-col>
        <el-col :span="6">
            <el-button size="small" @click="deleteIptVal">{{$t("route.reset")}}</el-button>
            <el-button size="small" type="primary" @click="onSearch">{{$t("table.search")}}</el-button>
        </el-col>
        <el-col  :span="14" style="text-align: right">
          <el-button size="small" type="success" icon="el-icon-edit" @click="addUsers">{{$t('table.addUser')}}</el-button>
        </el-col>
      </el-row>
     <!-- 消息提示 -->
      <el-alert
      style="margin:15px 0"
        type="info"
        :closable="false"
        show-icon>
        <template>
          数据一共{{total}}条
        </template>
      </el-alert>
      <!-- 表格 -->
      <el-table
        v-loading="listLoading"
        element-loading-text="给我一点时间"
        :data="usersData"
        :header-cell-style="{background:'#FAFAFA'}"
        fit
        highlight-current-row
        style="width: 100%;margin:15px 0">
        <el-table-column  align="center" :label="$t('table.id')" prop="id" ></el-table-column>
        <el-table-column  align="center" :label="$t('table.email')" prop="email" ></el-table-column>
        <el-table-column  align="center" :label="$t('table.phone')" prop="phone" > </el-table-column>
        <el-table-column  align="center" :label="$t('table.username')" prop="username"></el-table-column>
        <el-table-column  align="center" :label="$t('table.permissionUser')" prop="permission_group_title"></el-table-column>
        <el-table-column  align="center" :label="$t('table.role')" prop="role"></el-table-column>
        <el-table-column  align="center" :label="$t('table.actions')"             >
          <template slot-scope="{row}">
              <el-button type="primary" icon="el-icon-edit" circle plain @click="editUsers(row)"></el-button>
              <el-button
              v-if="row.id!==usersData[0].id"
               type="danger"
               icon="el-icon-delete"
               circle plain
               @click="remove(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
   <el-row type="flex" class="row-bg" justify="end">
     <el-col :span="8">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout=" prev, pager, next,sizes, jumper"
          background
          :total="total">
    </el-pagination>
     </el-col>
   </el-row>
    <!-- 分页区域 -->
   </el-card>
   <!-- 弹出层 -->
   <user-add
    :ruleInline="rules"
    :formBase="userForm"
    :PermissionGroupsList="PermissionGroupsList"
    @on-close="onClose"
    @on-add="onAdd"
     ref="usersAdd"/>
  </div>
</template>

<script>
import { list, remove, detail } from '@/api/base/users.js'
import { simple } from '@/api/base/permissions.js'
import userAdd from '../components/user-add.vue'
export default {
  components: { userAdd },
  name: 'usersList',
  data () {
    return {
      usersList: {
        page: 1,
        pagesize: 10,
        username: ''
      },
      usersData: [], // 表格数据
      total: 0,
      listLoading: true,
      userForm: {
        sex: '',
        username: '',
        email: '',
        password: '',
        role: '',
        permission_group_id: '',
        phone: '',
        introduction: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 1, max: 5, message: '用户名长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]

      },
      PermissionGroupsList: [] // 权限组名称

    }
  },

  created () {
    this.loadUserList()
  },
  computed: {
  },
  methods: {
    // 获取用户列表
    async loadUserList () {
      try {
        const res = await list(this.usersList)
        // console.log(res)
        this.usersData = res.data.list
        this.total = res.data.counts
        this.listLoading = false
      } catch (err) {
        console.log(err)
      }
    },
    // 点击清除
    deleteIptVal () {
      this.usersList.username = ''
      this.loadUserList()
    },
    // 点击搜索
    onSearch () {
      this.loadUserList()
      this.usersList.page = 1
    },
    // 点击新增
    async addUsers () {
      this.$refs.usersAdd.usersDialogVisible = true
      const res = await simple()
      // console.log(res)
      this.PermissionGroupsList = res.data
    },
    // 编辑
    async editUsers (row) {
      this.addUsers()
      const res = await detail({ id: row.id })
      // console.log(res)
      this.userForm = res.data
    },
    onClose () {
      this.userForm = {
        sex: '',
        username: '',
        email: '',
        password: '',
        role: '',
        permission_group_id: '',
        phone: '',
        introduction: ''
      }
    },
    onAdd () {
      this.loadUserList()
    },
    // 点击删除按钮
    remove (row) {
      this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (this.usersData === 1 && this.usersList.page !== 1) {
          this.usersList.page--
        }
        await remove({ id: row.id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.loadUserList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 改变每页多少条
    handleSizeChange (val) {
      this.usersList.pagesize = val
      this.loadUserList()
    },
    // 改变当前页
    handleCurrentChange (val) {
      this.usersList.page = val
      this.loadUserList()
    }

  }
}
</script>

<style scoped lang='less'>

</style>
